<template>
  <div>
    <h1>son</h1>
    <p>{{$attrs}}</p>
    <GrandSon ref="grandson" v-bind:msg="msg" v-bind="$attrs" />
    <!-- <button @click="change">change props</button> -->
    <button @click="$listeners.change">test $listeners</button>
    <button @click="$listeners.todo">test $listeners todo</button>
  </div>
</template>

<script>
import GrandSon from "./GrandSon";
export default {
  name: "Son",
  props: ["aaa", "name1"],
  data() {
    return {
      msg: "这是子组件！！"
    };
  },

  components: {
    GrandSon
  },

  computed: {},

  beforeMount() {},

  mounted() {
    console.log(this.$attrs);
    // console.log(this.change);
    console.log(this.$listeners);
  },

  methods: {
    sum(a, b) {
      console.log(a + b);
    }
  },

  watch: {}
};
</script>
<style lang='' scoped>
</style>